<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01HelloWord</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
</head>
<body>
<!--使用流程:
    1. 引入Vue.js
    2. 创建Vue对象
        el:指定根element(选择器)
        data:初始化数据(页面可以访问)
    3. 双向数据绑定的指定：v-model
    4. 显示数据：{{xxx}}}
    5. 理解vue的mvvm的实现

-->
    <!--  2.V  -->
<div id="app">  <!-- view -->
      <input type="text" v-model="username">
      <p>Hello {{username}}</p>
    </div>
    <script type="text/javascript">
        //3.V(new Vue);  4.创建Vue实例: vm(3和4)
        const vm = new Vue({     //配置对象,配置一些选项  option
            el: '#app',         //element： 选择器
            data: {             //1.M   //数据(model)
                username: 'atguigu'
            }
        });
        /**
         * MVVM 思维
         * 1.M
         * 2.V
         * 3.V
         * 4.M
         * */
        // <!--
          // MVVM:
          // model: 模型，数据对象(data(上述中的data)) --m
          // view: 视图，模板视图(显示的视图)   --v
          // viewModel: 视图模型(Vue的实例，vm)   --vm
        // -->
    </script>
</body>
</html>
